<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
/**
 * g-icon-button enables you to place an image centered in a button.
 *
 * Example:
 *
 *     <g-icon-button src="star.png"></g-icon-button>
 *
 * @class g-icon-button
 */
-->
<link rel="import" href="g-icon.html">
<polymer-element name="g-icon-button" attributes="src active">
  <template>
    <style>
      @host {
        * {
          display: inline-block;
          position: relative;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          width: 44px;
          height: 44px;
          line-height: 24px;
          padding: 10px;
          cursor: pointer;
          border: none;
          background-color: rgba(0, 0, 0, 0);
          background-position: top left;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url("images/btn_light.png");
          background-position: 0 0;
          vertical-align: middle;
        }
        
        *:hover {
          background-position: 0 -44px;
        }
        
        *.selected {
          background-position: 0 -88px;
        }
        
        *:active, *.selected:active {
          background-position: 0 -132px;
        }
      }
    </style>
    <g-icon src="{{src}}"></g-icon>
  </template>
  <script>
    Polymer('g-icon-button', {
      /**
       * The URL of an image for the icon.
       *
       * @attribute src
       * @type string
       * @default ''
       */
      src: '',
      /**
       * If true, border is placed around the button to indicate
       * active state.
       *
       * @attribute active
       * @type boolean
       * @default false
       */
      active: false,
      activeChanged: function() {
        // TODO(sjmiles): 'class' attributes should have special handling 
        //   for this common use case
        this.classList.toggle('selected', this.active);
      }
    });
  </script>
</polymer-element>
